<template>
	<view>
		<u-form
		  :model="model"
		  :rules="validatorRules"
		  ref="form"
		  labelPosition="top"
		  labelWidth="auto"
		  :labelStyle="{
		  	fontSize: '14px',
		  	color: '#B2B2B2',
		  	lineHight: '20px'
		  }"
		>
		<view class="basic-style">
			<u-form-item label="申请人" prop="propose">
			  <h-select-person-input
			    style="width: 100%"
			    disabled
			    v-model="model.proposer"
			    placeholder="请选择申请人"
			    border="surround"
			    suffixIcon="arrow-down-fill"
			    :suffixIconStyle="{ color: '#B2B2B2' }"
			    objectField="model.proposer"/>
			</u-form-item>
			<u-form-item label="申请部门" prop="proposerDeptId">
			  <h-select-depart-input
			    disabled
			    v-model="model.proposerDeptId"
			    :departName="model.proposerDeptText"
			    placeholder="请选择部门"
			    border="surround"
			    style="width: 100%"
			    suffixIcon="arrow-down-fill"
			    :suffixIconStyle="{ color: '#B2B2B2' }"
			    :title.sync="model.proposerDeptText"/>
			</u-form-item>
			<u-form-item label="申请时间">
			  <u--input v-model="model.createTime" disabled/>
			</u-form-item>
			
			<view class="basic-title basic-border">往来单位信息</view>
			<u-form-item label="企业名称" prop="enterpriseName" required>
			  <u--input v-model="model.enterpriseName" placeholder="请输入企业名称" />
			</u-form-item>
			<u-form-item label="企业信用代码" prop="enterpriseCreditCode" required>
			  <u--input v-model="model.enterpriseCreditCode" placeholder="请输入企业信用代码" />
			</u-form-item>
			<u-form-item label="企业地址" prop="enterpriseAddress" required>
			  <u--input maxlength="100" v-model="model.enterpriseAddress" placeholder="请输入企业地址" />
			</u-form-item>
			<u-form-item label="收款账户名称" prop="bankAccountName" required>
			  <u--input v-model="model.bankAccountName" placeholder="请输入收款账户名称" />
			</u-form-item>
			<u-form-item label="开户行联行号" prop="cnapsCode" required>
			  <h-select-finance-kingdee-bank-input-popup class="w-100" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{color: '#B2B2B2'}" v-model="model.cnapsCode" placeholder="请选择开户行联行号" @change="backCnapsCode" />
			</u-form-item>
			<u-form-item label="开户行" prop="bankName" required>
			  <u--input v-model="model.bankName" placeholder="请输入开户行" disabled />
			</u-form-item>
			<u-form-item label="银行账号" prop="bankAccountNo" required>
			  <u--input v-model="model.bankAccountNo" maxlength='32' placeholder="请输入银行账号"/>
			</u-form-item>
			<u-form-item label="合作业务" prop="mainBussiness" required>
			  <u--textarea :confirm-type="null" maxlength="500" count v-model="model.mainBussiness" placeholder="请输入合作业务"></u--textarea>
			</u-form-item>
			<view class="basic-title basic-border">联系人信息</view>
			<view class="space-y-1 py-1">
				<u-button size="small" type="primary" @click="handleAddForm">新增</u-button>
				<view  class="basic-border p-1 rounded-lg space-y-1">
					<ContactFormInfo
						v-for="(item, index) in contactList"
						:key="index"
						:item="item"
						:index="index"
						@edit="handleEditForm"
						@remove="handleRemoveForm"
					></ContactFormInfo>
				</view>
			</view>
		</view>
		<u-popup :round="10" mode="bottom" :show="showFormModal" :closeOnClickOverlay="false" @close="closeFormModal" @open="openFormModal">
			<ContactForm
				ref="dataForm"
				:index="index"
				@submit="handleFormSubmit"
				@close="showFormModal = false"
			/>
		</u-popup>
		<view class="space-x-1 px-1 btn_position">
			<u-button type="primary" :loading="loading" text="提交" @click="onSubmit"/>
		</view>
	</u-form>
		
	</view>
</template>
  
<script>
import { queryByEnterpriseName, queryByEnterpriseCreditCode,addSupplier,editSupplier } from '@/api/purchase/ErpPurchaseSupplier.js'
import { mapState } from 'vuex'
import moment from 'moment'
import ContactForm from './ContactForm'
import ContactFormInfo from './ContactFormInfo'
export default {
	name: 'unSupplierForm',
	components: {
		ContactForm,
		ContactFormInfo
	},
	data () {
		return {
			loading:false,
			title:'',
			validatorRules:{
			enterpriseName: [
				{ required: true, message: '请输入企业名称!',trigger: ['blur', 'change'] },
			],
			bankAccountName: [
				{ required: true, message: '请输入收款账户名称!',trigger: ['blur', 'change'] },
			],
			cnapsCode: [
				{ required: true, message: '请选择开户行联行号!',trigger: ['blur', 'change'] },
			],
			enterpriseCreditCode: [
				{ required: true, message: '请输入企业信用代码!',trigger: ['blur', 'change'] },
			],
			bankName: [
				{ required: true, message: '请输入开户行!',trigger: ['blur', 'change'] },
			],
			bankAccountNo: [
				{ required: true, message: '请输入银行账号!',trigger: ['blur', 'change'] },
			],
			mainBussiness: [
				{ required: true, message: '请输入合作业务!',trigger: ['blur', 'change'] },
			],
			enterpriseAddress: [
				{ required: true, message: '请输入企业地址!',trigger: ['blur', 'change'] },
			],
			},
			model:{
				proposer: '',
				proposerDeptId: '',
				createTime: '',
				enterpriseName: '',
				bankAccountName: '',
				enterpriseCreditCode: '',
				enterpriseAddress: '',
				mainBussiness: '',
				bankName: '',
				bankAccountNo: '',
				cnapsCode: ''
			},
			id:'',
			index: null,
			basicForm: {},
			showFormModal: false,
			contactList: []
		}
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad() {
		this.model.proposer = this.userInfo.empId //当前登录人
		this.model.proposerDeptId = this.userInfo.deptId //当前登录人部门
		this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss')
	},
	methods: {
		backCnapsCode(data) {
			if (data) {
				this.$set(this.model, 'bankName', data.bankBranchName)
			}
		},
		handleAddForm() {
			this.index = null
			this.showFormModal = true
		},
		handleEditForm([item, index]) {
			this.basicForm = { ...item }
			this.index = index
			this.showFormModal = true
		},
		handleRemoveForm(item) {
			this.contactList = this.contactList.filter((i) => i !== item)
		},
		closeFormModal() {
      this.$refs.dataForm.reset()
      this.basicForm = {}
      this.index = null
    },
    openFormModal() {
      this.$refs.dataForm.basicForm = this.basicForm
    },
		handleFormSubmit([data, index]) {
      this.showFormModal = false
      if (typeof index === 'number') {
        this.$set(this.contactList, index, { ...data })
      } else {
        this.contactList.push(data)
      }
    },
		// 提交或者保存
		onSubmit(){
			this.$refs.form.validate().then(async ()=>{
			uni.showLoading({
				title: '加载中...',
				mask:true
			});
			this.loading = true
			let rr = await queryByEnterpriseName( { enterpriseName: this.model.enterpriseName, commercialType: '2', id: this.id||''  })
			if (rr.success) {
				if(rr.result != '0') {
					this.loading = false
					return this.$u.toast('企业名称已存在，请重新输入！')
				}
			} else {
				this.loading = false
				return this.$u.toast(rr.message)
			}
		
			let bb = await queryByEnterpriseCreditCode( { enterpriseCreditCode: this.model.enterpriseCreditCode, commercialType: '2' })
			if (bb.success) {
				if(bb.result != '0') {
					this.loading = false
					return this.$u.toast('企业信用代码已存在，请重新输入！')
				}
			} else {
				this.loading = false
				return this.$u.toast(bb.message)
			}
			if (!this.contactList.length > 0) {
				this.loading = false
				return this.$u.toast('请添加联系人信息！')
			}
			let params = {
				commercialType: '2',
				proposerText:this.userInfo.realname,
				proposerDeptIdText: this.userInfo.orgCodeTxt,
				...this.model,
				detailList: this.contactList
			}
			let res = this.id? await editSupplier({
				...params,
				id: this.id
			}) : await addSupplier(params)
				if(res.success){
					// uni.$emit("unSuppFormBack")
					uni.navigateBack()
					setTimeout(()=>{
						this.$u.toast(res.message)
					},500)
				}else{
					this.$u.toast(res.message)
				}
				this.loading = false
				uni.hideLoading()
			})
		},
  }
}
</script>
<style lang="less" scoped>
</style>